<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">显示 ComponentA</button>
    <button @click="currentComponent = 'ComponentB'">显示 ComponentB</button>
    <button @click="currentComponent = 'ComponentC'">显示 ComponentC</button>

    <!-- 使用动态组件 -->
    <h2>使用动态组件</h2>
    <component :is="currentComponent"></component>
    <h2>使用keep-live</h2>
    <keep-alive :exclude="['ComponentA']">
      <component :is="currentComponent"></component>
    </keep-alive>
    <h2>使用异步组件</h2>
    <button @click="show = show == true ? false : true">显示异步组件</button>
    <ComponentD v-if="show" />
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
import ComponentC from './ComponentC.vue'
export default {
  name: 'page-day23',
  components: {
    ComponentA,
    ComponentB,
    ComponentC,
    ComponentD: () => import('./ComponentD')
  },
  data() {
    return {
      currentComponent: 'ComponentA', // 默认显示 ComponentA
      show: false
    }
  }
}
</script>

<style lang="scss" scoped></style>
